<template>
  <div style="height: 100%;">
    <el-container style="height: 100%;">
      <el-aside
        width="sideWidth + 'px'"
        style="background-color: rgb(238, 241, 246);height: 100%;"
      >
        <el-menu
          :default-openeds="['1']"
          style="min-height: 100%; overflow-x: hidden"
          background-color="rgb(48,65,86)"
          text-color=" #fff"
          active-text-color="#ffd04b"
          :collapse-transition="false"
          :collapse="isCollapse"
        >
          <div style="height: 60px;line-height:  60px;margin-left: 10px;">
            <img
              src="@/assets/logo.png"
              alt=""
              style="width: 20px;position: relative;top: 5px;margin-right: 5px"
            />
            <b style="color: white " v-show="logoTextShow">嘻嘻哈哈图书馆</b>
          </div>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>管理员</span>
            </template>
            <el-menu-item-group>
              <template>
                <el-submenu index="1-1">
                  <template slot="title"
                    ><span class="el-icon-reading span_font_size"
                      >书籍管理</span
                    ></template
                  >

                  <el-menu-item @click="goBookdata" index="1-1-1">
                    <span class="el-icon-collection span_font_size"
                      >书籍详情</span
                    >
                  </el-menu-item>

                  <el-menu-item index="1-1-2" @click="goBookview">
                    <span class="el-icon-data-analysis span_font_size"
                      >书籍视图</span
                    >
                  </el-menu-item>
                </el-submenu>
              </template>
            </el-menu-item-group>
            <el-menu-item index="1-2" @click="goUserManage">
              <span class="el-icon-s-custom span_font_size">用户管理</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header
          style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display:flex;background-color: unset
"
        >
          <div style="flex: 1; font-size: 20px">
            <span
              :class="collapseBtnClass"
              style="cursor:pointer;font-size:medium;"
              @click="collapse"
              >{{ currentpage }}</span
            >
          </div>
          <el-dropdown style="width: 100px">
            <span class="el-icon-user-solid" style="color:aliceblue"> {{ adminName }}</span
            ><i
              class="el-icon-arrow-down"
              style="margin-left: 5px;color:aliceblue"
            ></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                ><span @click="goback">退出</span></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>

        <el-main style="height:80%;padding:10px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  props: {
    adminName: {
      typeof: String,
      required: true
    }
  },
  data () {
    return {
      currentpage: '',
      tableData: [],
      borrows: [],
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
      headerBg: 'headerBg'
    }
  },
  created () {
    this.getBook()
  },
  methods: {
    goBookview () {
      this.currentpage = '书籍视图'
      this.$router.push({ name: 'bookview' }).catch(() => {})
    },
    goback () {
      console.log('退出')
      this.$router.push({ path: '/Home/managepage' }).catch(() => {})
    },
    collapse () {
      // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.isCollapse = 64
        this.logoTextShow = false
      } else {
        this.logoTextShow = true
      }
    },
    getBorrow () {
      this.$ajax('/borrow/borrowAll')
        .then(res => {
          this.borrows = res.data
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    getBook () {
      this.$ajax('/book/bookAll')
        .then(res => {
          this.tableData = res.data
          console.log(res.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    goUserManage () {
      this.currentpage = '用户管理'
      this.$router.push({ name: 'usersmanage' }).catch(() => {})
    },
    goBookdata () {
      this.currentpage = '书籍管理'
      this.$router.push({ name: 'mbookdata' }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.span_font_size {
  font-size: 14px !important;
}
</style>
